<template>
  <el-dialog v-model="dialogInfo.visible" :title="dialogInfo.title" :width="dialogInfo.width" align-center>
    <el-form label-position="left" :model="formModel" label-width="120px">
      <el-row>
        <el-col :sm="24">
          <el-form-item label="课程名称" class="text-white-50">
            <div class="text-white">{{formModel.courseName}}</div>
          </el-form-item>
        </el-col>
        <el-col :sm="24">
          <el-form-item label="教师名称">
            <div class="text-white">{{formModel.teacherName}}</div>
          </el-form-item>
        </el-col>
        <el-col :sm="24">
          <el-form-item label="拉取状态">
            <div class="text-white">{{findValue(pullingStateOption,formModel.pullingState) }}</div>
          </el-form-item>
        </el-col>
        <el-col :sm="24">
          <el-form-item label="录制时间">
            <div class="text-white">{{formModel.actionTime}}</div>
          </el-form-item>
        </el-col>
        <el-col :sm="24">
          <el-form-item label="浏览量">
            <div class="text-white">{{formModel.pageviews}}</div>
          </el-form-item>
        </el-col>
        <el-col :sm="24">
          <el-form-item label="封面">
            <el-image preview-teleported="true" style="height: 30px" :src="formModel.image" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[formModel.image]" :initial-index="0" fit="cover" /> </el-form-item>
        </el-col>
        <el-col :sm="24">
          <el-form-item label="标题">
            <div class="text-white">{{formModel.title}}</div>
          </el-form-item>
        </el-col>
        <el-col :sm="24">
          <el-form-item label="所属教室">
            <div class="text-white">{{formModel.roomName}}</div>
          </el-form-item>
        </el-col>
        <el-col :sm="24">
          <el-form-item label="发布状态">
            <div class="text-white">{{findValue(releaseStateOption,formModel.releaseState) }}</div>
          </el-form-item>
        </el-col>
        <el-col :sm="24">
          <el-form-item label="备注">
            <div class="text-white">{{formModel.note}}</div>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>


    <template #footer>
      <span class="dialog-footer">
        <el-button type="info" plain @click="onCancel()">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>
  
  <script setup>

import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import { getNewObj } from '@/utils/EsCommon';
import { workerorderParams, workerStatusList, workerFaultTypeList } from '@/apis/model/WorkerorderModel';
import ImageUpload from '@/components/upload/ImageUpload.vue';

// ======================================================
//                      变量声明
// ======================================================
import { pullingStateList, releaseStateList } from '@/apis/model/RecordModel';
import { findValue } from '@/utils/EsCommon';
// emit
const emit = defineEmits(['success']);

const pullingStateOption = ref(pullingStateList);
const releaseStateOption = ref(releaseStateList);
// 表单数据
const formAttrs = getNewObj(workerorderParams());
const formModel = ref(Object.assign({}, formAttrs));
// 弹窗信息
const dialogInfo = ref({
  visible: false,
  title: '',
  width: '800px',
})
// 表单组件的引用实例
const formRef = ref(null);
// 加载状态


// ======================================================
//                      点击操作
// ======================================================


// 点击取消按钮
const onCancel = () => {
  dialogInfo.value.visible = false;
}

// ======================================================
//                      处理事件
// ======================================================


// 加载数据
const show = (id, title, item = null, width = '600px') => {
  console.log(id, title, item, width)
  dialogInfo.value.title = title;
  dialogInfo.value.width = width;
  dialogInfo.value.visible = true;
  if (id) {
    formModel.value = Object.assign({ ...formAttrs }, getNewObj(item));
  }
}


defineExpose({
  show
})
  </script>